const CompressionPlugin = require('compression-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    js: [
        'https://unpkg.com/vue@next',
        'https://unpkg.com/vue-router@4',
        'https://unpkg.com/vuex@2.0.0',
        'https://unpkg.com/axios/dist/axios.min.js',
    ]
}

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        config.devServer = {
            port: 3000,//端口号
            open: false,
        }
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios'
            }
            config.performance = {
                //入口起点的最大体积 整数类型（以字节为单位）
                maxEntrypointSize: 10000000,
                //生成文件的最大体积 整数类型（以字节为单位 300k）
                maxAssetSize: 30000000,
                //只给出 js 文件的性能提示
                assetFilter: function (assetFilename) {
                    return assetFilename.endsWith('.js');
                }
            }
        }
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }
    },
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    }
}